<template>
    <div>
      <div class="app-container customer_report">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="90px"
        >
          <el-form-item label="時間維度" prop="costCode">
            <el-select
              v-model="queryParams.timeDimension"
              placeholder="請選擇時間維度"
            >
              <el-option
                v-for="dict in dict.type.time_dimension"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客戶維度" prop="costTitle">
            <el-select
              clearable
              v-model="queryParams.dataDimension"
              placeholder="請選擇客戶數據統計維度"
              ref="optionRef"
              @change="select_change"
            >
              <el-option
                v-for="dict in dict.type.reservation_data_dimension"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="時間範圍" prop="costTitle">
            <el-date-picker
              v-model="dateArr"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="開始日期"
              end-placeholder="結束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="">
            <el-button type="primary" size="mini" @click="getList"
              >生成</el-button
            >
            <!-- <el-button size="mini" @click="DownloadQuery">下載報告</el-button> -->
          </el-form-item>
        </el-form>
        <div>
          <el-row :gutter="10" class="mb8" id="pdf_box">
            <el-col :span="12">
              <div id="bar"></div>
            </el-col>
            <el-col :span="12">
              <div id="line_box"></div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </template>
    
    <script>
  import { postReservationStatistics } from "@/api/biz/reservation";
  // import BarChart from './dashboard/BarChart'
  import * as echarts from "echarts";
  
  export default {
    name: "Customer",
    dicts: [
      "time_dimension",
      "customer_data_dimension",
      "industry_type",
      "industry",
      "customer_type",
      "customer_tag",
      "customer_level",
      "customer_source",
      "reservation_type",
      "reservation_data_dimension",
    ],
    components: {},
    data() {
      return {
        // 遮罩层
        loading: true,
        // 查询參數
        queryParams: {
          timeDimension: "month",
          dataDimension: "",
          startDate: "",
          endDate: "",
        },
        dateArr: [this.$moment().subtract(1, 'years').format("YYYY-MM-DD"),this.$moment().format("YYYY-MM-DD")],
        seriesName: "ssss",
        chart: null,
        mychart_line_: null,
        chart_bar: {
          xAxisData: [],
          seriesData: [],
          legendData: [],
        },
        chart_line: {
          xAxisData: [],
          seriesData: [],
          legendData: [],
        },
      };
    },
    created() {},
    mounted() {
      this.getList();
    },
    methods: {
      select_change(item) {
        console.log(item);
        this.$nextTick(() => {
          this.seriesName = this.$refs.optionRef.selected.label;
          console.log(this.$refs.optionRef.selected.value);
        });
      },
      /** 查询客戶列表 */
      getList() {
        if (this.dateArr.length != 0) {
          this.queryParams.startDate = this.dateArr[0];
          this.queryParams.endDate = this.dateArr[1];
        }
        this.chart_bar.xAxisData = [];
        this.chart_bar.seriesData = [];
        this.chart_bar.legendData = [];
        this.chart_line.seriesData = [];
        // dataDimensionValue
        this.loading = true;
        let xAxisData = [];
        let seriesData = [];
        postReservationStatistics(this.queryParams).then((response) => {
          response.data.map((item) => {
            if (item.timeDimension == "month") {
              xAxisData.push(item.month);
            }
            if (item.timeDimension == "quarter") {
              xAxisData.push(item.quarter);
            }
            if (item.timeDimension == "year") {
              xAxisData.push(item.year);
            }
            // 已選擇維度
            if (item.dataDimension) {
              switch (item.dataDimension) {
                case "reservation_type":
                  if (item.dataDimensionValue == null) {
                    item.dataDimensionValue_cn = "未知";
                  }
                  this.dict.type.reservation_type.map((ele) => {
                    if (ele.value == item.dataDimensionValue) {
                      item.dataDimensionValue_cn = ele.label;
                    }
                  });
                  break;
                default:
                  break;
              }
            } else {
              item.dataDimensionValue_cn = "所有";
            }
            seriesData.push({
              name: item.dataDimensionValue_cn,
              type: "bar",
              stack: "vistors",
              barWidth: "20",
              month: item.month,
              timeDimension: item.timeDimension,
              quarter: item.quarter,
              year: item.year,
              quantity: item.quantity,
              data: [],
            });
            // this.chart_bar.seriesData.push(item.quantity);
          });
          this.chart_bar.xAxisData = [...new Set(xAxisData)];
          console.log(55555);
          console.log(seriesData);
          seriesData.map((item) => {
            this.chart_bar.legendData.push(item.name);
            this.chart_bar.xAxisData.map((ele) => {
              if (item.timeDimension == "month") {
                if (ele == item.month) {
                  item.data.push(item.quantity);
                } else {
                  item.data.push(0);
                }
              }
              if (item.timeDimension == "quarter") {
                if (ele == item.quarter) {
                  item.data.push(item.quantity);
                } else {
                  item.data.push(0);
                }
              }
              if (item.timeDimension == "year") {
                if (ele == item.year) {
                  item.data.push(item.quantity);
                } else {
                  item.data.push(0);
                }
              }
            });
          });
          this.chart_bar.seriesData = seriesData;
          this.chart_line.seriesData = JSON.parse(JSON.stringify(seriesData));
          this.chart_line.seriesData.map((item) => {
            item.type = "line";
            item.stack = "";
          });
          console.log(this.chart_bar.legendData);
          console.log(this.chart_line.seriesData);
          // this.chart_line.seriesData =  [...new Set(this.seriesData.seriesData)] 
  
          this.loading = false;
          let that = this;
          this.$nextTick(() => {
            that.initBarChart();
            setTimeout(() => {
              that.initlineChart();
            }, 100);
          });
        });
      },
      initBarChart() {
        this.chart = echarts.init(document.getElementById("bar"));
        this.chart.clear();
        this.chart.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            show: true,
            data: this.chart_bar.legendData,
            orient: "horizontal",
          },
          grid: {
            top: 40,
            left: "2%",
            right: "2%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: this.chart_bar.xAxisData,
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              minInterval: 1,
              axisTick: {
                show: false,
              },
            },
          ],
          series: this.chart_bar.seriesData,
        });
      },
      initlineChart() {
        this.mychart_line_ = echarts.init(document.getElementById("line_box"));
        this.mychart_line_.clear();
        this.mychart_line_.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            show: true,
            data: this.chart_bar.legendData,
          },
          grid: {
            top: 40,
            left: "2%",
            right: "2%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: this.chart_bar.xAxisData,
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              minInterval: 1,
              axisTick: {
                show: false,
              },
            },
          ],
          series: this.chart_line.seriesData,
        });
      },
  
      handleQuery() {},
      DownloadQuery() {
        this.$nextTick(() => {
          // this.htmlToPdf("pdf_box", "客戶統計報告與分析");
        });
      },
  
      /** 導出按钮操作 */
      handleExport() {
        this.download(
          "biz/customer/export",
          {
            ...this.queryParams,
          },
          `customer_${new Date().getTime()}.xlsx`
        );
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .customer_report {
    padding: 32px;
    position: relative;
    #bar,
    #line_box {
      width: 100%;
      height: 400px;
    }
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }
  
  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
  </style>